<template>
  <!-- 用户购买记录-->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="用户昵称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="add-box">
      <el-button type="primary" plain size="mini" @click="addProduct">添加账号</el-button>
      <el-button type="warning" plain size="mini" @click="handleDel()">删除账号</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="用户昵称" align="center" prop="nickName" />
      <el-table-column label="用户账号" align="center" prop="userName" />
      <el-table-column label="用户手机号" align="center" prop="phonenumber" />
      <el-table-column label="华为云账号" align="center" prop="hwAccount" />
      <el-table-column label="用户余额" align="center" prop="userWallet" />
      <el-table-column label="用户邮箱" align="center" prop="email" />
      <el-table-column label="通讯地址" align="center" prop="address" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize" @pagination="getList" />
    <!-- 添加 & 修改 -->
    <el-dialog :title="addForm.userId ? '修改账号' : '添加账号'" :visible.sync="addShow" 
      :close-on-click-modal="false" width="40%">
      <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="addForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" prop="userName">
          <el-input v-model="addForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户手机" prop="phonenumber">
          <el-input v-model="addForm.phonenumber" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="华为云账号" prop="hwAccount">
          <el-input v-model="addForm.hwAccount"></el-input>
        </el-form-item>
        <el-form-item label="用户余额" prop="userWallet">
          <el-input v-model="addForm.userWallet"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="通讯地址" prop="address">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addHandleSure">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailShow" width="50%" :close-on-click-modal="false">
      <el-form :model="detailRow" label-width="100px">
        <div class="flex">
          <div>
            <el-form-item label="用户昵称：">{{ detailRow.nickName || "-" }}</el-form-item>
            <el-form-item label="用户手机号："> {{ detailRow.phonenumber || "-" }} </el-form-item>
            <el-form-item label="用户余额:">{{ detailRow.userWallet || 0 }} 元</el-form-item>
            <el-form-item label="通讯地址:">{{ detailRow.address || "-" }}</el-form-item>
          </div>
          <div>
            <el-form-item label="用户账号:">{{ detailRow.userName || "-" }}</el-form-item>
            <el-form-item label="华为云账号:">{{ detailRow.hwAccount || "-" }}</el-form-item>
            <el-form-item label="用户邮箱：">{{ detailRow.email || "-" }}</el-form-item>
            <el-form-item label="创建时间">{{ detailRow.createTime || "-" }}</el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="detailShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { virtuallyAccountList, addVirtuallyAccount, updateVirtuallyAccount, delVirtuallyAccount } from "@/api/systemManagement/userAccountBind";
export default {
  data() {
    return {
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 充值管理表格数据
      // 查询参数
      queryParams: {
        nickName:'',
        params: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      detailRow: {},//详情内容
      detailShow: false,//详情弹窗开关
      addShow: false,//添加弹窗开关
      addForm: {},//添加的内容
      rules: {//添加表单验证
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'change' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '请输入用户账号', trigger: 'change' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'change' }
        ],
        phonenumber: [
          { required: true, message: '请输入电话号码', trigger: 'change' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        hwAccount: [
          { required: true, message: '请输入华为云账号', trigger: 'change' }
        ],
        userWallet: [
          { required: true, message: '请输入余额', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          // 邮箱验证
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: '请输入通讯地址', trigger: 'change' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'change' }
        ],
      },
      userLists: [],//用户列表
    };
  },
  created() {
    //获取表格数据
    this.getList();
  },
  methods: {
    /**多选 */
    handleSelectionChange(val) {
      this.ids = val.map(item => item.userId);
    },
    /**删除分类 */
    handleDel(row) {
      let id = row ? [row.userId] : this.ids;
      this.$modal.confirm(`是否确认删除该用户绑定的华为云账号?`).then(() => {
        delVirtuallyAccount(id).then(res => {
          if (200 == res.code) {
            this.getList();
            this.$message.success('删除成功！');
          }
        })
      }).catch(() => { });
    },
    /**打开添加产品信息弹窗 */
    addProduct() {
      this.addShow = true;
      this.addForm = {};
      this.resetForm('addForm');
    },
    /**打开修改弹窗 */
    handleUpdate(row) {
      this.addShow = true;
      this.addForm = Object.assign({}, row);
    },
    /**确认添加 & 修改 */
    addHandleSure() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          let axios = this.addForm.userId ? updateVirtuallyAccount : addVirtuallyAccount;
          axios(this.addForm).then(res => {
            if (200 == res.code) {
              this.getList();
              this.addShow = false;
              this.$message.success(this.addForm.userId ? '修改账号成功' : '添加账号成功');
            }
          })
        }
      });
    },
    /**关闭添加 & 修改对话框 */
    cancelForm() {
      this.resetForm('addForm');
      this.addShow = false;
    },
    /**查看详情 */
    handleView(row) {
      this.detailRow = Object.assign({}, row);
      this.detailShow = true;
    },
    /** 查询账号绑定信息列表 */
    getList() {
      this.loading = true;
      virtuallyAccountList(this.queryParams).then((res) => {
        this.dataList = res.rows;
        this.total = res.total;
      })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.add-box {
  margin-bottom: 20px;
}

.flex {
  display: flex;

  >div {
    flex: 1;
  }
}

.el-select {
  width: 100%;
}
</style>
